<template>
	<view class="bigContainer">
		<!-- 头部搜素 -->
		<view class="headerContainer">
			<!-- <view class="text">搜索商品，共112739好物</view> -->
			<input type="text" placeholder="搜索商品，共112739好物">
		</view>
		<!-- 内容部分 -->
		<view class="contentContainer">
			<view class="left">
				<view class="leftItem active">为你推荐</view>
				<view class="leftItem" v-for="item in categoryData" :key="item.id" @click="handleClickItem(item)">{{item.name}}</view>
			
			</view>
			<view class="right">
				<!-- 图片部分 -->
				<image class="bigImg" :src="itemInfo.imgUrl ? itemInfo.imgUrl :'../../static/images/tx.jpg'" ></image>
				<!-- 图片列表 -->
				<view class="bottom">
					<view class="imgItem" v-for="item in  itemInfo.subCateList" :key="item.id">
						<image :src="item.wapBannerUrl"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				categoryData:{},   //页面所有的数据
				itemInfo:{},       //对应右侧的数据
			};
		},
		methods:{
			// 页面加载获取详情页数据
		async	getCategoryInfo(){
				const result = await request('/categoryData')
				if(result.code == 200){
					this.categoryData = result.categoryData
				}
			},
			// 点击拿到当前项右边的数据
			handleClickItem(item){
				this.itemInfo = item
			}
		},
		mounted(){
			this.getCategoryInfo()
		}
	}
</script>

<style lang="stylus">
.bigContainer
	.headerContainer
		height: 40px
		line-height: 30px
		padding: 10rpx 20rpx
		width: 100%
		box-sizing: border-box
		text-align: center
		font-size: 26rpx
		border-bottom: 2rpx solid #eee
		.text
			width: 100%
			height: 100%
			background-color: #eee
			border-radius: 20rpx
			color: #999
			
			
			
	.contentContainer
		display: flex
		width: 100%
		.left
			width: 25%
			border-right: 2rpx solid #eee
			text-align: center
			.leftItem
				margin-top: 30rpx
				display: flex
				line-height: 60rpx
				flex-direction: column
				font-size: 26rpx
				&.active
					border-left: 4rpx solid #b42333	
					color: #b42333
		.right
			color: #999
			padding: 20rpx
			box-sizing: border-box
			width: 75%
			.bigImg
				width: 100%
				height: 200rpx
				margin-bottom: 30rpx
			.bottom
				width: 100%
				display: flex
				flex-wrap: wrap
				.imgItem
					width: 130px
					height:130rpx
					display: flex
					flex-direction: column
					align-items: center
					font-size: 26rpx
					image 
						width: 100%
					
		
		
		
		
.test
	color: #f89
			
			
	
	
		
	
	
	


</style>
